﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载图层控件（自定义）</title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
</head>
<body>

    <div id="map">
        <div id="mouse-position"></div>
        <div id="layerControl" class="layerControl">
            <div class="title"><label>图层列表</label></div>
            <ul id="layerTree" class="layerTree"></ul>
        </div>
    </div>
    <script type="text/javascript">
       

        //实例化Map对象加载地图
        var map = new ol.Map({
            target: 'map', //地图容器div的ID
            //地图容器中加载的图层
            layers: [
                //中国影像
                new ol.layer.Tile({
                    source: new ol.source.XYZ({ url: "http://t4.tianditu.gov.cn/img_c/wmts?tk=6dfd31e3b55a8466f34997aee5551a9c&layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}" }),
                    name: "中国影像",
                    visible: true
                }),
                //中国影像标注
                new ol.layer.Tile({
                    source: new ol.source.XYZ({ url: "http://t6.tianditu.gov.cn/cia_c/wmts?tk=6dfd31e3b55a8466f34997aee5551a9c&layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}" }),
                    name: "中国影像标注",
                    visible: true
                }),
                //中国地图
                new ol.layer.Tile({
                    source: new ol.source.XYZ({ url: "http://t4.tianditu.gov.cn/vec_c/wmts?tk=6dfd31e3b55a8466f34997aee5551a9c&layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}" }),
                    name: "中国地图",
                    visible: false
                }),
                //中国地图标注
                new ol.layer.Tile({
                    source: new ol.source.XYZ({ url: "http://t2.tianditu.gov.cn/cva_c/wmts?tk=6dfd31e3b55a8466f34997aee5551a9c&layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}" }),
                    name: "中国地图标注",
                    visible: false
                })
            ],
            //地图视图设置
            view: new ol.View({
                center: [120, 28],
                // projection: ol.proj.get("EPSG:4326"),
                zoom: 2 //地图初始显示级别
            })
        });
        

    </script>
</body>
</html>
